<div class="weather-box" *ngIf="loaded">
  <div class="col1">
    <span class="temperature">{{userProvider.weather.data.tmp}}</span>
    <span> ℃</span>
    <span class="other">{{userProvider.weather.data.cond_txt}}
      <span>
        <canvas class="icon" id="{{icon}}" width="30" height="30">
        </canvas>
      </span>
    </span>
    <span class="other">湿度 {{userProvider.weather.data.hum}}%</span>
    <span class="other">AQI {{userProvider.air.data.qlty}}</span>
    <span class="other">{{userProvider.weather.location}}</span>
  </div>
  <!-- <div class="col2" *ngIf="showCol">{{userProvider.weather.location}}</div>
  <div class="col3" *ngIf="showCol">
    <div>空气质量 {{userProvider.air.data.qlty}}</div>
    <div class="other">湿度 {{userProvider.weather.data.hum}}</div>
  </div> -->
</div>
<!-- <canvas id="clear-day" width="16" height="16">
</canvas>

<canvas id="clear-night" width="16" height="16">
</canvas>

<canvas id="partly-cloudy-day" width="16" height="16">
</canvas>

<canvas id="partly-cloudy-night" width="16" height="16">
</canvas>

<canvas id="cloudy" width="16" height="16">
</canvas>

<canvas id="rain" width="16" height="16">
</canvas>

<canvas id="sleet" width="16" height="16">
</canvas>

<canvas id="snow" width="16" height="16">
</canvas>

<canvas id="wind" width="16" height="16">
</canvas>

<canvas id="fog" width="16" height="16">
</canvas> -->